<template>
    <div id="listview" class="ui middle aligned divided selection  list">
        <div class="item" v-for="contact in contacts">
            <i id="close" class="mini close icon" style="display: inline;"></i>
            <img id="avatar" class="ui mini avatar image" :src="contact.icon">
            <div class="content">
                <div class="header">
                    {{contact.name}}
                </div>
                <div class="description" style="font-size: 8pt;">
                    {{contact.desc}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        contacts: [
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Veronika',
            desc: '测试工程师'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Andrewlu',
            desc: '研发工程师'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          },
          {
            icon: '//www.semantic-ui.cn/images/avatar/large/jenny.jpg',
            name: 'Kaka',
            desc: '街头小霸王'
          }
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    #listview {
        width: 180px;
        height: auto;
        background-color: #dff0ff;
        padding: 0;
        margin: 0;
        text-align: left;
        overflow-y: scroll;
    }

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 8px;
        background-color: rgba(255, 255, 255, .1);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
        background-color: #888;
    }
</style>
